import React, { PureComponent } from 'react'
import { Radio, Tooltip } from 'antd'
import { history } from '@umijs/max'
import styles from './index.less'
import PieCard from './pieCard'
import HufuEchartsLine from '@/components/Echarts/line'
import empty from '../../../assets/images/empty.png'
import { ProTable, ProTableOptions } from '@/components'
import { dataDisplayChart, dataDisplayTable, dataDistribute } from './api'

export default class Index extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      data: {},
      problem: [],
      dataQualityTodayExceptionDomains: [],
      dataProblemTopModelList: [],
      columns: [
        {
          title: '表名',
          dataIndex: 'tblName',
          width: '22%',
          key: 'tblName',
        },
        {
          title: '规则名称',
          dataIndex: 'ruleName',
          width: '32%',
          key: 'ruleName',
          render: (text, record) => (!text || text === '' ? '--' : text),
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '22%',
          key: 'status',
          render: (text, record) => (!text || text === '' ? '--' : { 2: '异常', 3: 'sql语句出错' }[text]),
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '24%',
          key: 'operation',
          render: (text, record, index) => (
            <ProTableOptions>
              <span onClick={() => {
                history.push('/dataQuality/ruleConfig')
              }}
              >查看
              </span>
            </ProTableOptions>
          ),
        },
      ],
      execptionLineOptions: {
        xAxis: {
          name: '',
          data: [],
        },
        yAxis: {
          name: '',
        },
        series: [
          {
            data: [],
          },
        ],
      },
    }
  }

  componentDidMount() {
    this.dataDisplayTable()
    this.dataDisplayChart()
    this.dataDistribute(0)
  }

  dataDisplayTable = () => {
    dataDisplayTable().then((data) => {
      this.setState({
        data,
      })
    })
  }

  dataDisplayChart = () => {
    dataDisplayChart().then((data) => {
      const xAxis = []
      const datas = []
      data && data.dataTendModelList && data.dataTendModelList.map((item) => {
        xAxis.push(item.date)
        datas.push(item.sum)
      })
      this.setState({
        execptionLineOptions: {
          xAxis: {
            name: '',
            data: xAxis,
          },
          yAxis: {
            name: '',
          },
          series: [
            {
              data: datas,
            },
          ],
        },
        dataProblemTopModelList: data.dataProblemTopModelList,
        dataQualityTodayExceptionDomains: data.dataQualityTodayExceptionDomains || [],
      })
    })
  }

  dataDistribute = (distributeBy) => {
    dataDistribute({ distributeBy }).then((data) => {
      data.map((item) => {
        item.name = item.disTypeName
        item.value = item.problemNum
      })
      this.setState({
        problem: data || [],
      })
    })
  }

  render() {
    const {
      data, dataProblemTopModelList, loading, dataQualityTodayExceptionDomains, problem,
    } = this.state
    return (
      <div className={`${styles.page_content_with_breadcrumb} ${styles.theme_design}`}>
        <div className={styles.page_content_title}>
          <div className={styles.title_item}>
            <p>数据质量问题</p>
            <p><span className={styles.num}>{data.problemTotal}</span><span>个</span></p>
            <div className={styles.iconfont_box}>
              <i style={{ fontSize: '.30rem' }} className="iconfont-colour2 icon-cunchu-1" />
            </div>
          </div>
          <div className={`${styles.title_item} ${styles.title_item_padding}`}>
            <p>数据质量规则数</p>
            <p><span className={styles.num}>{data.ruleNum}</span><span>个</span></p>
            <div className={styles.iconfont_box}>
              <i style={{ fontSize: '.30rem' }} className="iconfont-colour2 icon-shujuceng" />
            </div>
          </div>
          <div className={`${styles.title_item} ${styles.title_item_padding}`}>
            <p>监控覆盖率</p>
            <p><span className={styles.num}>{data.monitorCoverage}</span><span>%</span></p>
            <div className={styles.iconfont_box}>
              <i style={{ fontSize: '.30rem' }} className="iconfont-colour2 icon-fugaishuai" />
            </div>
          </div>
          <div className={`${styles.title_item} ${styles.title_item_padding}`}>
            <p>监控表/监控字段</p>
            <p><span className={styles.num}>{`${data.monitorChart} / ${data.monitorField}`}</span><span>个</span></p>
            <div className={styles.iconfont_box}>
              <i style={{ fontSize: '.30rem' }} className="iconfont-colour2 icon-biao" />
            </div>
          </div>
          <div className={`${styles.title_item} ${styles.title_item_padding}`}>
            <p>数据表信息维护率</p>
            <p><span className={styles.num}>{data.descRate}</span><span>%</span></p>
            <div className={styles.iconfont_box}>
              <i style={{ fontSize: '.30rem' }} className="iconfont-colour2 icon-weihushuai" />
            </div>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.left}>
            <div className={styles.header}>数据质量问题分布
              <Tooltip
                placement="right"
                title={
                  <div>
                    <p>
                      数据完整性规则包括：完整性约束、空值约束，空值占比约束，空字符串约束；
                    </p>
                    <p>
                      数据唯一性规则包括：重复值约束、重复值占比约束；
                    </p>
                    <p>数据有效性规则包括：取值范围约束、极大值约束、极小值约束、长度约束、正则表达式约束-电话号码验证、正则表达式约束-身份证号验证、代码长度约束、枚举值约束、特殊字符约束；</p>
                    <p>
                      数据准确性规则包括：平均值约束、总值约束、自定义规则。
                    </p>
                  </div>
                }
              >
                <i className="iconfont icon-yiwentishi" />
              </Tooltip>
              <Radio.Group
                onChange={(e) => {
                  this.dataDistribute(e.target.value)
                }}
                defaultValue={0}
                size="small"
                style={{ marginTop: '.20rem', float: 'right' }}
              >
                <Radio.Button value={0}>每天</Radio.Button>
                <Radio.Button value={1}>每周</Radio.Button>
                <Radio.Button value={2}>每月</Radio.Button>
              </Radio.Group>
            </div>
            <div className={`${styles.content_item} ${styles.content_itemCard}`}>
              <PieCard data={problem} />
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.header}>近一周数据质量趋势</div>
            <div className={styles.content_item}>
              <HufuEchartsLine
                options={this.state.execptionLineOptions}
              />
            </div>
          </div>
        </div>
        <div className={styles.footer}>
          <div className={styles.left}>
            <div className={styles.header}>数据质量问题表TOP10</div>
            <div className={styles.content_item}>
              <ul>
                {dataProblemTopModelList && dataProblemTopModelList.length
                  ? dataProblemTopModelList.map((item, key) => (
                    <li key={key}>
                      <p>
                        <span>{key + 1}</span><span>{item.tblName}</span><span>{item.exceptionCount}</span>
                      </p>
                      {/* <p> <span /> </p> */}
                    </li>
                  )) : (
                    <div className={styles.empty}>
                      <img src={empty} alt="" />
                      <p>暂无数据</p>
                    </div>
                  )}
              </ul>
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.header}>今日质量问题项</div>
            <div className={styles.content_item}>
              <ProTable
                dataSource={dataQualityTodayExceptionDomains}
                columns={this.state.columns}
                loading={loading}
                pagination={false}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
